/* Light Theme Variables (Default) */
:root,
:root.light {
  /* 基础颜色 */
  --background-color: #ffffff;
  --surface-color: #fafafa;
  --border-color: #e1e1e1;
  --text-color: #2c3e50;
  --text-secondary: #606266;
  --text-muted: #909399;
  
  /* 主要颜色 */
  --primary-color: #42b883;
  --primary-light: #4fc08d;
  --primary-dark: #369870;
  
  /* 状态颜色 */
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #409eff;
  
  /* 阴影 */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.15);
}

* {
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--surface-color);
  color: var(--text-color);
}

#app {
  color: var(--text-color);
  background: var(--background-color);
}

a {
  color: #42b883;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}